<template>
	<div v-if="categoryList.length">
		<div id="container">
			<div class="product">
				<div class="pro_line">
					<div class="left_section">
						<h3 v-text="this.categoryList[this.currentCate - 1].cate_name"></h3>
						<el-dropdown @command="handleCommand">
							<span class="el-dropdown-link">
								更多类别<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="(cate, index) in categoryList" :key="index"
									:command="index + 1">
									{{ cate.cate_name }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<router-link to="/home" class="goHome">返回首页</router-link>
				</div>
				<div class="pro_show">
					<ProductItem v-for="(goods) in paginatedGoods" :key="goods.goods_id" :pro="goods" />
				</div>
			</div>
		</div>
		<div id="footer">
			<el-pagination background layout="prev, pager, next" :total="totalItems" :page-size="pageSize"
				@current-change="getMore" :current-page.sync="activeIndex" class="custom-pagination">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import ProductItem from '../../components/ProductItem/ProductItem'

export default {
	data() {
		return {
			activeIndex: 1,  // 当前页码
			currentCate: 1,  // 当前分类
			pageSize: 4,    // 每页显示的商品数量
			totalItems: 0,   // 总商品数量
		}
	},
	components: {
		ProductItem
	},
	computed: {
		...mapState(['categoryList', 'userInfo', 'recommendshoplist']),
		paginatedGoods() {
			const start = (this.activeIndex - 1) * this.pageSize;
			const end = start + this.pageSize;
			return this.recommendshoplist.slice(start, end);
		},
	},
	created() {
		this.currentCate = Number(this.$route.params.id);
		this.activeIndex = Number(this.$route.params.pageNo);
		this.fetchData();
		// 请求当前用户信息
		this.$store.dispatch('getUserInfo');
	},
	watch: {
		$route() {
			this.currentCate = Number(this.$route.params.id);
			this.activeIndex = Number(this.$route.params.pageNo);
			this.fetchData();
		},
	},
	methods: {
		handleCommand(command) {
			this.$router.replace('/search/' + command + "/1");
			this.currentCate = command;
			this.activeIndex = 1;
			this.fetchData();
		},
		goDetail(id) {
			this.$router.replace('/goods/' + id);
		},
		getMore(index) {
			if (index && index !== this.activeIndex) {
				this.activeIndex = index;
				this.$router.replace('/search/' + this.currentCate + "/" + this.activeIndex);
			}
		},
		async fetchData() {
			const response = await this.$store.dispatch('reqRecommendShopList', {
				category: this.currentCate,
				pageNo: 1, // Always fetch all data for current category
				count: 1000 // Fetch a large number to ensure we get all items
			});
			this.totalItems = this.recommendshoplist.length; // Update totalItems based on fetched data
		}
	},
}
</script>

<style scoped>
#container {
	position: relative;
	margin: 30px auto;
	width: 100%;
	padding: 0 20px;
}

.product {
	margin: 0 auto;
	width: 100%;
}

.product>.pro_line {
	margin-bottom: 20px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 26px;
	font-family: sans-serif;
	font-weight: normal;
	color: #222;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #eee;
}

.pro_line .left_section {
	display: flex;
	align-items: center;
	gap: 20px;
}

.pro_line>h3 {
	display: inline-block;
	font-size: 24px;
}

.el-dropdown-link {
	display: inline-block;
	cursor: pointer;
	color: #409EFF;
	font-size: 16px;
}

.el-icon-arrow-down {
	font-size: 12px;
}

.goHome {
	font-size: 16px;
	display: inline-block;
	text-decoration: none;
	color: skyblue;
	cursor: pointer;
}

.goHome:hover {
	color: #ccc;
}

.product>.pro_show {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-around;
	margin-top: 20px;
}

#footer {
	margin-top: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.custom-pagination {
	text-align: center;
	margin-top: 20px;
}

@media (max-width: 768px) {
	.product>.pro_show {
		flex-direction: column;
		align-items: center;
	}

	.pro_line {
		flex-direction: column;
		align-items: flex-start;
	}

	.goHome {
		margin-top: 10px;
	}
}

@media (max-width: 480px) {

	.el-dropdown-link,
	.goHome {
		font-size: 14px;
	}

	.product>.pro_show {
		flex-direction: column;
		gap: 10px;
	}
}
</style>
